import React from 'react';
import styles from './index.less';
import { Button, Picker, Tabs, Popover, Input, Switch, Popup, Space, Tag, TextArea } from 'antd-mobile';
import { QuestionCircleOutline } from 'antd-mobile-icons';
import { debounce } from 'lodash';

class H5Platform extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      popupPosition: 'right',
    };

  }

  componentDidMount() {

  }


  render() {
    // 参数区
    const {
      drawShow,
      videoUrl,
      videoLineList,
      channelAddrList,
      videoName,
      videoChannelList,
      parseLine,
      searchKeyword,
      isSearchLoading,
      searchAutoCompleteDataList,
    } = this.props;
    // 方法区
    const {
      onCloseDraw,
      onUpdateState,
      onVideoItemChange,
      playAddressBtnShow,
      searchVideoResultList,
      onSearchVideo,
      onSearchVideoItemList,
      onDirectParseVideo,
      onVideoTitleChange,
      onVideoLineChange,
    } = this.props;

    // 当前类state
    const { popupPosition } = this.state;
    const pickerColumns = [];
    pickerColumns.push(videoLineList?.map(item => {
      return { label: item.name, value: item.url };
    }));

    const videoTabsDataList = [];
    videoChannelList?.sort((a, b) => a.channelName.length > b.channelName.length ? -1 : 1)
      .forEach((videoChannel, idx) => {
        const { channelName, videoItemList } = videoChannel;
        const videoTabsChildrenDataList = videoItemList?.map(videoItem => {
          const isChange = videoItem.url === videoUrl;
          const isClick = !!videoItem?.url;
          let borderColor = '', color = '', bgColor = '';
          if(isClick) {
            borderColor = isChange ? 'red' : '';
            color = isChange ? 'red' : '';
          } else {
            borderColor = '1px solid #e9e9e9';
            bgColor = '#ececec';
            color = '#999';
          }
          return (
            <span
              style={{
                borderColor: borderColor,
                color: color,
                background: bgColor,
                pointerEvents: isClick ? 'auto' : 'none' }}
              onClick={() => onVideoItemChange(videoItem)}>
              {videoItem.name}
            </span>
          );
        });

        videoTabsDataList.push({
          label: channelName,
          key: (idx + 1),
          children: (
            <div style={{ width: '100%' }}>
              <Space size={[8, 16]} wrap>{videoTabsChildrenDataList}</Space>
            </div>
          ),
        });
      });

    return (
      <div className={styles.wrap}>
        <Popup
          className={styles.drawer}
          visible={drawShow}
          position={popupPosition}
          // showCloseButton
          closeOnMaskClick={true}
          onClose={onCloseDraw}
          bodyStyle={{
            width: '80vw',
            // borderTopLeftRadius: '8px',
            // borderTopRightRadius: '8px',
          }}
        >
          <div style={{
            margin: '15px 0',
            padding: '0 15px',
            overflowY: 'auto',
            height: '100vh',
          }}>
            {/*<div className={styles.item}>*/}
            {/*  <span className={styles.title}>播放渠道</span>*/}
            {/*  <div className={styles.channel}>*/}
            {/*    <Space wrap>*/}
            {/*      {*/}
            {/*        channelAddrList?.map((item, idx) => {*/}
            {/*          return (<label key={idx} onClick={() => window.open(item.url)}>{item.name}</label>);*/}
            {/*        })*/}
            {/*      }*/}
            {/*    </Space>*/}
            {/*  </div>*/}
            {/*</div>*/}

            <div className={styles.item}>
              <span className={styles.title}>播放地址</span>
              <div className={styles.advanceBtn}>
                <Switch
                  checkedText={<span style={{ fontSize: '13px'}}>搜索</span>}
                  uncheckedText={<span style={{ fontSize: '13px'}}>搜索</span>}
                  style={{
                    // '--checked-color': '#00b578',
                    '--height': '24px',
                    '--width': '48px',
                  }}
                  checked={playAddressBtnShow}
                  onChange={v => onUpdateState({ playAddressBtnShow: v })}
                />
              </div>
              <div>
                {!playAddressBtnShow && <TextArea
                  key={'videoUrlKey'}
                  rows={4}
                  className={styles.videoUrl}
                  placeholder={'请用电脑打开视频平台，将要观看的电影链接复制到此处...'}
                  value={videoUrl || ''}
                  // autoSize={{ minRows: 1, maxRows: 4 }}
                  onChange={value => onUpdateState({ videoUrl: value })}
                />}
                {
                  playAddressBtnShow && (
                    <div className={styles.playAddressBtn}>
                      {/* 搜索栏 */}
                      <div className={styles.searchVideo}>
                        <Space>
                          <Input
                            className={styles.videoInput}
                            placeholder='请输入视频名称'
                            value={searchKeyword}
                            onChange={value => {
                              onUpdateState({ searchKeyword: value });
                            }}
                          />
                          <Button
                            size={'small'}
                            color={'primary'}
                            fill='outline'
                            onClick={() => onSearchVideoItemList()}
                            disabled={isSearchLoading}>搜索</Button>
                        </Space>
                      </div>
                      <span className={styles.tips}>
                        非精确检索时，搜索结果可能展示不全
                    </span>

                      {/* 搜索到的视频结果展示 */}
                      <div
                        className={styles.searchVideoItem}
                        style={{ display: (isSearchLoading || searchVideoResultList.length === 0) ? 'none' : 'block' }}>
                        <Space size={[8, 16]} wrap>
                          {
                            searchVideoResultList?.map((item, idx) => {
                              const isChange = item.title === videoName;
                              const changeColor = isChange ? 'red' : '';
                              return (
                                <label
                                  key={idx}
                                  style={{ borderColor: changeColor, color: changeColor }}
                                  onClick={() => onVideoTitleChange(item)}>{item.title}
                                </label>);
                            })
                          }
                        </Space>
                      </div>
                    </div>
                  )
                }
              </div>
            </div>

            <div className={styles.item}>
              <span className={styles.title}>播放线路</span>
              <div className={styles.parseBtn}>
                <Space>
                  <Picker
                    key={'picker-a'}
                    columns={pickerColumns}
                    defaultValue={[parseLine]}
                    onConfirm={(val, extend) => {
                      onVideoLineChange(val[0]);
                    }}
                  >
                    {(items, { open }) => {
                      return (
                        <>
                          {items?.map((item, idx) => {
                            return (<Tag key={idx + 1} color={'success'} className={styles.tag}
                                         onClick={open}>{item.label}</Tag>
                              ??
                              <Tag key={idx + 1} color={'warning'} className={styles.tag} onClick={open}>请选择线路</Tag>);
                          })}
                        </>
                      );
                    }}
                  </Picker>
                  <div style={{ display: playAddressBtnShow ? 'none' : 'block' }}>
                    <Space>
                      <Button size={'small'} color={'primary'} onClick={() => onDirectParseVideo()}>解析</Button>
                      <div className={styles.tips}>
                        <Popover
                          content={<div className={styles.tipsPopover}>
                            <div>
                              解析错误或播放不对
                              <br />
                              请更换线路重新解析
                            </div>
                          </div>}
                          trigger='click'
                          placement='top-start'
                          mode='dark'
                        >
                          <QuestionCircleOutline fontSize={22} color='var(--adm-color-weak)' />
                        </Popover>
                      </div>
                    </Space>
                  </div>
                </Space>
              </div>

              <div className={styles.gugao} style={{ display: !!videoName ? 'none' : 'block' }}>
                <div>请不要打开页面上的<span>任何广告</span>信息</div>
                <div>我不会放置<span>广告</span>，项目即兴研发且<span>免费</span></div>
              </div>
            </div>

            <div className={styles.item} style={{ display: !!videoName ? 'block' : 'none' }}>
              <span className={styles.title}>{videoName}</span>
              <div className={styles.videoList}>
                {videoChannelList?.length > 0 && <Tabs
                  // size={'small'}
                  defaultActiveKey={'1'}
                  stretch={false}
                  style={{
                    '--content-padding': '12px 0',
                    '--title-font-size': '14px',
                    textAlign: 'left'
                  }}
                >
                  {videoTabsDataList.map(tabData => {
                    return (
                      <Tabs.Tab title={tabData.label} key={tabData.key}>
                        { tabData.children }
                      </Tabs.Tab>
                    )
                  })}
                </Tabs>
                }
                {videoChannelList?.length === 0 && <div>暂无播放渠道</div>}
              </div>
            </div>

            <div style={{ height: '150px' }} />
          </div>
        </Popup>
      </div>
    );
  }
}

export default H5Platform;